<script setup>
import { ref } from 'vue'

defineProps({
  msg: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: false,
    default (){
        return {id:1, title: '气动固定式球阀Q647F',image: '/src/assets/WX20240324-021156@2x%201.png'}
    }
  }
})



const count = ref(0)
</script>

<template>
    <div class="w-full h-full relative card  text-underint ">
        <div class="w-full pt-[100%] relative block">
            <img class="wen-icon timing" :src="data.image" />
        </div>
        <div class="w-full title">
            <p class="py-6 text-center line-clamp-1 text-2xl mobile:text-lg mobile:py-[10px]">{{ data.title }}</p>
        </div>
    </div>
</template>

<style scoped>
    .card:hover .title{
        background-color: #2F3767;
        color:white;
    }
    .card{
        background-color: #F2F6FA;
    }
    .card:nth-child(2n){
        background-color: #E6EBF2;
    }
    .card>div.block>img{
        transition-timing-function: cubic-bezier(0,0,0.6,1);
        transition: all 0.250s;
    }
    .card:hover>div.block>img{
        transform: translate(-50%,-50%) scale(1.1);
    }
    @media (max-width: 768px) {
        .card:nth-child(4n),.card:nth-child(4n+1){
            background-color: #F2F6FA;
        }
        .card:nth-child(4n+2),.card:nth-child(4n+3){
            background-color: #E6EBF2;
        }
    }
</style>
